use(["public/javascripts/service/feeTrialService.js",
    "public/common/classNames.js",
    "public/javascripts/widget/slider/slider.js",
    "public/javascripts/widget/select/select.js",
    "public/javascripts/widget/prompt/prompt.js"
], function (feeTrialService, classNames, SliderComponent, Select, prompt) {
    var cx = classNames;
    var PageComponent = React.createClass({
        addressTplRender: function (fromOrEnd, flag, data) {
            var self = this;
            var tpl = [];
            var isCountryCodeNotExist = self.state[fromOrEnd]['countryCode'] == "";
            tpl.push(
                <div key={fromOrEnd + data.stateId}
                     className={cx('zjA_selectArea',{hide:isCountryCodeNotExist || self.state[fromOrEnd].isCnAddress})}>
                    <input name="country"
                           className=""
                           id={data.stateId}
                           readonly
                           value={data.state}
                           onClick={this.getAreaList.bind(this,data.stateId,"")}
                          />
                </div>
            )
            tpl.push(
                <div key={fromOrEnd + data.provinceId}
                     className={cx('zjA_selectArea',{hide:isCountryCodeNotExist || !(self.state[fromOrEnd].isCnAddress)})}>
                    <div className="zjA_selectArea_CN">
                        <input name="province"
                               className="fl"
                               key={fromOrEnd + data.provinceId}
                               id={data.provinceId}
                               value={data.province}
                               readonly
                               onClick={this.getAreaList.bind(this,data.provinceId,"")}            
			       placeholder={'请选择省'}/>
                        <input name="city"
                               className="fr"
                               key={fromOrEnd + data.cityId}
                               id={data.cityId}
                               readonly
                               onClick={this.getAreaList.bind(this,data.cityId,"")}
                               value={data.city}
                               placeholder={'请选择市'}/>
                    </div>
                    <div className="zjA_selectArea_CN">
                        <input name="district"
                               className="fl"
                               key={fromOrEnd + data.districtId}
                               id={data.districtId}
                               value={data.district}
                               readonly
                               onClick={this.getAreaList.bind(this,data.districtId,"")}
                               placeholder={'请选择区/县'}/>
                        <input name="street"
                               className="fr"
                               key={fromOrEnd + data.streetId}
                               id={data.streetId}
                               value={data.street}
                               readonly
                               onClick={this.getAreaList.bind(this,data.streetId,"")}
                               placeholder={'请选择街道'}/>
                    </div>
                </div>
            )
            return tpl;
        },
        lwhTplRender: function () {
            var self = this;
            var tempTpl = [];
            var stateData = this.state;
            for (var s = 1, len = stateData.lwhList.length; s < len; s++) {
                tempTpl.push(
                    <div key={s}>
                        <div className="fc_50">
                            <label className="fc_label"></label>
                            <input className="fc_weightInput"
                                   id={"weight"+s}
                                   value={stateData.lwhList[s]['weight']}
                                   onChange={self.lwhChange.bind(self,s,'weight')}
                                   placeholder="请输入重量"
                                   name=""/>
                            <span
                                className="fc_unit b0 w100">{stateData.cargoUnitCode}</span>
                        </div>
                        <div className="fc_50">
                            <label className="fc_label"></label>
                            <input className="fc_volume ml0"
                                   id={"length"+s}
                                   placeholder="长" type="number"
                                   value={stateData.lwhList[s]['length']}
                                   onChange={self.lwhChange.bind(self,s,'length')}
                                   name=""/>
                            <input className="fc_volume"
                                   id={"width"+s}
                                   placeholder="宽" type="number"
                                   value={stateData.lwhList[s]['width']}
                                   onChange={self.lwhChange.bind(self,s,'width')}
                                   name=""/>
                            <input className="fc_volume"
                                   id={"height"+s}
                                   placeholder="高" type="number"
                                   value={stateData.lwhList[s]['height']}
                                   onChange={this.lwhChange.bind(this,s,'height')}
                                   name=""/>
                        </div>
                        <i className="zjLWH_minus"
                           onClick={self.delItem.bind(this,s)}></i>
                    </div>
                )
            }
            return tempTpl;
        },
        lwhErrorTipTplRender: function () {
            var self = this;
            var stateData = self.state;
            var tempTpl = [];
            if (stateData.lwhErrorTips) {
                tempTpl.push(
                    <div className="errorTips ml80">
                        <span>{stateData.lwhErrorTips}</span>
                    </div>
                )
            } else {
                tempTpl.push(
                    <div className="errorTips ml80">
                    </div>
                );
            }
            return tempTpl;
        },
        gridTplRender: function () {
            var self = this;
            var tempTpl = [];
            var tempGridTpl = [];
            var stateData = this.state;
            var dataList = stateData.gridDataList;
            if (!stateData.submitted) {
                return null;
            }
            if (dataList.length > 0) {
                dataList.map(function (item, index) {
                    var serviceList = [];
                    var detail = [];
                    var feeDetail = [];

                    item.service.map(function (list, th) {
                        serviceList.push(
                            <div key={th + " " + index} className="wdWrap wServiceDiv" style={{position:"relative"}} title={list.serviceName}>
                                <input type="checkbox"
                                       className=""
                                       ref = {"wService"+ index}
                                       id = {"wService"+ index}
                                       checked={list.checked}
                                       onChange={self.configureMoney.bind(this,index,th)}/>
                                <label htmlFor={"wService"+ index}></label>
                                <span style={{position:"relative","bottom": "2px","left":"7px"}}>{list.serviceTypCodeName}</span>
                            </div>
                        )
                    });

                    for (var s = 1, len = item.feePrice.length; s < len; s++) {
                        detail.push(
                            <span key={s + " " + index} className="zjGrid_td_baseFee wdWrap"
                                  title={item.feePrice[s].name +  ':' + item.feePrice[s].value}>
                                {item.feePrice[s].name + ':' + item.feePrice[s].value}
                            </span>
                        )
                    }
                    detail.push(
                        <span  key={ item.feePrice.length + " " + index} className="zjGrid_td_baseFee wdWrap"
                              title={'总价:' + item.feePrice[0].value}>
                                {'总价:'}
                            <b className="money">{item.feePrice[0].value}</b>
                            </span>
                    )

                    feeDetail.push(
                        <td className="zjGrid_td wGrid5">
                            {detail}
                        </td>
                    )

                    tempGridTpl.push(
                        <tr key={index} className="zjGrid_tr">
                            <td className="zjGrid_td wGrid0" title={item.groupName}>
                                {item.groupName}
                            </td>
                            <td className="zjGrid_td wGrid1" title={item.productName}>
                                {item.productName}
                            </td>
                            <td className="zjGrid_td wGrid2">
                                {serviceList}
                            </td>
                            <td className="zjGrid_td wGrid3" title={item.aging}>
                                {item.aging}
                            </td>
                            <td className="zjGrid_td wGrid4" title={item.feeWeight}>
                                {item.feeWeight}
                            </td>
                            {feeDetail}
                            <td className="zjGrid_td wGrid6"
                                onClick={self.jumpTo.bind(this,index)}
                                title={item.feeAction}>
                                <a className="zjGrid_td_action">{item.feeAction}</a>
                            </td>
                        </tr>
                    )
                });
                tempTpl.push(
                    <table className="feeTrialGrid">
                        <tr className="zjGrid_tr h50 ">
                            <th className="zjGrid_th wGrid0">
                                {"类型"}
                            </th>
                            <th className="zjGrid_th wGrid1">
                                {"产品"}
                            </th>
                            <th className="zjGrid_th wGrid2">
                                {"服务"}
                            </th>
                            <th className="zjGrid_th wGrid3">
                                {"时效"}
                            </th>
                            <th className="zjGrid_th wGrid4">
                                {"计费重"}
                            </th>
                            <th className="zjGrid_th wGrid5">
                                {"价格"}
                            </th>
                            <th className="zjGrid_th wGrid6">
                                {"操作"}
                            </th>
                        </tr>
                        {tempGridTpl}
                    </table>
                )
            } else {
                tempTpl.push(
                    <table className="feeTrialGrid">
                        <tr className="zjGrid_tr h50 ">
                            <th className="zjGrid_th wGrid0">
                                {"类型"}
                            </th>
                            <th className="zjGrid_th wGrid1">
                                {"产品"}
                            </th>
                            <th className="zjGrid_th wGrid2">
                                {"服务"}
                            </th>
                            <th className="zjGrid_th wGrid3">
                                {"时效"}
                            </th>
                            <th className="zjGrid_th wGrid4">
                                {"计费重"}
                            </th>
                            <th className="zjGrid_th wGrid5-2">
                                {"价格"}
                            </th>
                            <th className="zjGrid_th wGrid6">
                                {"操作"}
                            </th>
                        </tr>
                        <tr className="noDataFound">
                            <span>搜索无结果，请重新搜索~</span>
                        </tr>
                    </table>
                )
            }
            return tempTpl.concat();
        },
        componentWillMount: function () {
            for (var i in feeTrialService) this[i] = feeTrialService[i].bind(this);
        },
        componentDidMount: function () {
            var self = this;
            this.getRange();
            this.getProduct();
            this.getCargoTypeList(true);
            this.getCargoUnitList(true);
            this.getCurrencyUnitList();
            var dom = [
                {
                id:"fromState",
                nameStr:"cityName",
                codeStr:"cityCode",
                delKey:"provinceCode",
                nextLevel:""
            },{
                id:"fromProvince",
                nameStr:"provinceName",
                codeStr:"provinceCode",
                nextLevel:"fromCity"
            },{
                id:"fromCity",
                nameStr:"cityName",
                codeStr:"cityCode",
                nextLevel:"fromDistrict"
            },{
                id:"fromDistrict",
                nameStr:"districtName",
                codeStr:"districtCode",
                nextLevel:"fromStreet"
            },{
                id:"fromStreet",
                nameStr:"streetName",
                codeStr:"streetCode",
                nextLevel:""
            },{
                id:"endState",
                nameStr:"cityName",
                codeStr:"cityCode",
                delKey:"provinceCode",
                nextLevel:""
            },{
                id:"endProvince",
                nameStr:"provinceName",
                codeStr:"provinceCode",
                nextLevel:"endCity"
            },{
                id:"endCity",
                nameStr:"cityName",
                codeStr:"cityCode",
                nextLevel:"endDistrict"
            },{
                id:"endDistrict",
                nameStr:"districtName",
                codeStr:"districtCode",
                nextLevel:"endStreet"
            },{
                id:"endStreet",
                nameStr:"streetName",
                codeStr:"streetCode",
                nextLevel:""
            }];
            self.getCountryList("fromCountry", "", 1);
            self.getCountryList("endCountry", "", 2);
            for(var s in dom){
                self.initAreaList(dom[s].id,"",dom[s].nameStr,dom[s].codeStr,dom[s].delKey,dom[s].nextLevel);
            }
        },
        componentDidUpdate: function() {
            if(this.state.scrollTrue && $(".feeTrialGrid").length > 0) {
                $(window).scrollTop($(".feeTrialGrid").offset().top);
                this.state.scrollTrue = false;
            }
        },
        getInitialState: function () {
            return {
                fromAddress: {
                    countryId: "fromCountry",
                    stateId: "fromState",
                    provinceId: "fromProvince",
                    cityId: "fromCity",
                    districtId: "fromDistrict",
                    streetId: "fromStreet",
                    label: "起点:",
                    countryName: "",
                    provinceName: "",
                    cityName: "",
                    districtName: "",
                    stateName: "",
                    streetName: "",
                    countryCode: "",
                    provinceCode: "",
                    cityCode: "",
                    districtCode: "",
                    stateCode: "",
                    streetCode: "",
                    isCnAddress: false
                },
                endAddress: {
                    countryId: "endCountry",
                    stateId: "endState",
                    provinceId: "endProvince",
                    districtId: "endDistrict",
                    cityId: "endCity",
                    streetId: "endStreet",
                    label: "终点:",
                    countryName: "",
                    provinceName: "",
                    cityName: "",
                    districtName: "",
                    stateName: "",
                    streetName: "",
                    countryCode: "",
                    provinceCode: "",
                    cityCode: "",
                    districtCode: "",
                    stateCode: "",
                    streetCode: "",
                    isCnAddress: false
                },
                lwhList: [{
                    length: "",
                    width: "",
                    height: "",
                    weight: ""
                }],
                grid: [],
                lwhErrorTips: [],
                productType: [],
                productCode: [],
                range:"类型",
                typeDisplay:"block",
                productDisplay:"none",
                gridDataList: []
            };
        },
        render: function () {
            var data = this.state;
            var self = this;
            var fromAddressTpl = [];
            var endAddressTpl = [];
            var lwhTpl = [];
            var gridTpl = [];
            var lwhTplErrorTipTpl = [];
            fromAddressTpl = this.addressTplRender('fromAddress', data.fromAddress.isCnAddress, data.fromAddress);
            endAddressTpl = this.addressTplRender('endAddress', data.endAddress.isCnAddress, data.endAddress);
            lwhTpl = this.lwhTplRender();
            if(data.showGrid){
                gridTpl = this.gridTplRender();
            }
            lwhTplErrorTipTpl = this.lwhErrorTipTplRender();
            return ~init;
        }
    });
    if (typeof ReactDOM != "undefined") {
        ReactDOM.render(<PageComponent data={storage}/>, document.getElementById('container'));
    }
    module.exports = PageComponent;
});
